<template>
  <div class="address-edit">
    <el-dialog
      title="编辑地址"
      :visible.sync="dialogShow"
      width="50%"
      @close="handleClose"
    >
      <el-form ref="form" :model="address" label-width="100px" :inline="false" size="small">
        <el-form-item label="发货人姓名">
          <el-input v-model="address.name" />
        </el-form-item>
        <!--参考: # https://github.com/Plortinus/element-china-area-data -->
        <!-- 地市数据来源: #https://github.com/airyland/china-area-data -->
        <el-form-item label="收货人地址">
          <el-cascader
            v-model="selectedOptions"
            size="small"
            :options="options"
            @change="handleCityChange"
          />
        </el-form-item>

      </el-form>

      <span slot="footer">
        <el-button @click="handleClose">Cancel</el-button>
        <el-button type="primary" @click="doSave">OK</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  name: 'AddressDetail',
  components: {

  },
  data() {
    return {
      dialogShow: false,
      address: {},
      options: regionData, // 地市数据信息对象
      selectedOptions: [] // 选择地市后得到的结果
    }
  },
  computed: {

  },
  created() {
    // 模拟编辑回显地址: 只要设置selectedOptions值即可
    this.selectedOptions = ['410000', '410100', '410105']
  },
  mounted() {
    // this.$nextTick(function() {
    //   this.$on('childmethods', function() {
    //     this.dialogShow = true
    //   })
    // })
  },
  methods: {
    // 打开弹窗,可以通过父组件调用
    openDialog() {
      this.dialogShow = true
    },
    // 提交保存
    doSave() {

    },
    // 处理关闭逻辑
    handleClose() {
      this.dialogShow = false
    },
    // 地市数据变化后触发
    handleCityChange(value) {
      // 结果得到的是城市的地市编码
      console.log(value) // ["410000", "410100", "410105"]
      // 根据接口要求: 地址编码,英文逗号隔开,比如
      this.address.cityCode = value.join(',') // '410000,410100,410105'
      // 分别根据地市编码还原地市名字,并赋值
      // CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市
      this.address.province = CodeToText[value[0]]
      this.address.city = CodeToText[value[1]]
      this.address.region = CodeToText[value[2]]
      console.log('this.address', this.address)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
